<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font-size: 30px;
			}
			input{
				font-size: 20px;
			}
			.div1{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
			}
		</style>
		<script src="jquery-3.5.1.min.js"></script>
		<script>
			$(function(){
				// 显示
				$("#btn1").click(function(){
					$(".div1").show(5000);
				});
				// 隐藏
				$("#btn2").click(function(){
					$(".div1").hide(5000);
				});
				// 淡入
				$("#btn3").click(function(){
					$(".div1").fadeIn(5000);
				});
				// 淡出
				$("#btn4").click(function(){
					$(".div1").fadeOut(5000);
				});
				// 上滑
				$("#btn5").click(function(){
					$(".div1").slideUp(5000);
				});
				// 下滑
				$("#btn6").click(function(){
					$(".div1").slideDown(5000);
				});
				$("#btn7").click(function(){
					$(".div1").animate(
					{
						left:"20px",
						top:"10px"
					},5000);
				});
				
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="显示">
		<input type="button" id="btn2" value="隐藏">
		<input type="button" id="btn3" value="淡入">
		<input type="button" id="btn4" value="淡出">
		<input type="button" id="btn5" value="上滑">
		<input type="button" id="btn6" value="下滑">
		<input type="button" id="btn7" value="平移">
		<input type="button" id="btn8" value="悬停">
		<div class="div1" style="position: absolute;top: 100px;">
			hello
		</div>
		
	</body>
</html>
